import React, { useMemo } from 'react'
import { Card, Grid, } from 'antd-mobile'

const MonthBill = ({ date, billsList }) => {
	const monthResult = useMemo(() => {
		const pay = billsList.filter(bill => bill.type === 'pay').reduce((acc, cur) => acc + cur.money, 0)
		const income = billsList.filter(bill => bill.type === 'income').reduce((acc, cur) => acc + cur.money, 0)
		return {
			pay,
			income,
			total: (income - pay).toFixed(2)
		}
	}, [billsList])
	return (
		<div style={{ marginTop: '10px' }}>
			<Card
				title={date}
			>
				<Grid columns={3}>
					<Grid.Item>
						<span style={{ color: 'red' }}>pay</span>
						<span>{monthResult.pay}</span>
					</Grid.Item>
					<Grid.Item>
						<span style={{ color: 'green' }}>income</span>
						<span>{monthResult.income}</span>
					</Grid.Item>
					<Grid.Item style={{ textAlign: 'right' }}>
						<span style={{ fontSize: '1rem', paddingRight: '0.5rem' }}>{monthResult.total}</span>
						<span>balances</span>
					</Grid.Item>
				</Grid>
			</Card >
		</div>
	)
}

export default MonthBill